﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="../../static_files/bootstrap-table/bootstrap.min.css" rel="stylesheet">
    <link href="../../static_files/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link type="text/css" href="../../static_files/stylesheet/font-awesome.min.css" rel="stylesheet">
    <link href="../../static_files/stylesheet/default.css" rel="stylesheet" />

    <link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
    <script type="text/javascript" src="../../static_files/JavaScript/jquery.js"></script>
    <script src="../../static_files/bootstrap-table/bootstrap.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
    <script src="../../static_files/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../../static_files/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="../../static_files/JavaScript/build.js"></script>
</head>
<body>
    <div class="container">
        <!-- 按钮：用于打开模态框 -->
        <!-- 模态框 -->
    </div>
    <table id="list_table"></table>

   
    <script>
        var jsondata =
            [
                {
                   
                    "Name": "农房项目",
                    "Income": "2,456,000.00",
                    "Material": "2,456,000.00",
                    "Labour": "4,500.00",
                    "Lease": "358,000.00",
                    "Subcontract": "800,000.00",
                    "Indirect": "248,678.00",
                    "grossProfit": "6,547.89",
                    "Rate": "2.09",
                },
                {
                    "Name": "农房项目",
                    "Income": "6,654,098.00",
                    "Material": "2,346,000.00",
                    "Labour": "4,500.00",
                    "Lease": "358,000.00",
                    "Subcontract": "600,000.00",
                    "Indirect": "248,981.00",
                    "grossProfit": "6,547.89",
                    "Rate": "2.45",



                },

            ]
        var listdata =
            [
                {
                    "ID": 1

                }
            ]

        //初始化bootstrap-table的内容

        //记录页面bootstrap-table全局变量$table，方便应用
        $('#list_table').bootstrapTable({
            //url: queryUrl,                      //请求后台的URL（*）
            //method: 'GET',                      //请求方式（*）
            toolbar: '#toolbar',              //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
            /* pageSize: rows,         */            //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: true,                      //是否显示表格搜索
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列（选择显示的列）
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                  //是否显示父子表
            //得到查询的参数
            queryParams: function (params) {
                //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
                var temp = {
                    rows: params.limit,                         //页面大小
                    page: (params.offset / params.limit) + 1,   //页码
                    sort: params.sort,      //排序列名
                    sortOrder: params.order //排位命令（desc，asc）
                };
                return temp;
            },
            columns: [{
                checkbox: true,
                visible: true                  //是否显示复选框
            }, {
                field: 'Name',
                title: '项目名称',
                sortable: true
            }, {
                field: 'Income',
                title: '收入',
                sortable: true
            }, {
                field: 'Material',
                title: '材料',
                sortable: true
            },{
                field: 'Labour',
                title: '劳务',
                sortable: true
            }, {
                field: 'Lease',
                title: '租赁',
                sortable: true
            },  {
                field: 'Subcontract',
                title: '分包',
                sortable: true
            },  {
                field: 'Indirect',
                title: '间接费',
                sortable: true
            }, {
                field: 'grossProfit',
                title: '项目毛利',
                sortable: true
            }, {
                field: 'Rate',
                title: '毛利率',
                sortable: true
            }, {
                field: 'Operate',
                title: '操作',
                align: 'center',
                formatter: deleteAddFormatter,
            },],
            data: jsondata,
            onLoadSuccess: function () {
                //alert('abc');
            },
            onPostHeader: function () {

            },
            onPostBody: function () {
                //alert('body');
            }
        });
        $('.columns-right').append('&nbsp;&nbsp;<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="width:100px" onclick=add_rows()><i class="fa fa-plus-square addstyle_addpage_white"></i>&nbsp;添加</button >&nbsp;');
        function add_rows() {
            $('#list_table').append('<tr data-index="0" data-uniqueid="1"> <td style=""><input type="checkbox"></td><td style="text-align: center; "><input type="text" style="width:100%"/></td><td style="text-align: center; "><input type="text" style="width:100%"/></td><td style="text-align: center; "><input type="text" style="width:100%"/></td><td style="text-align: center; "><input type="text" style="width:100%"/></td><td style="text-align: center; "><input type="text" style="width:100%"/></td><td style="text-align: center; "><input type="text" style="width:100%"/></td><td style="text-align: center; "><input type="text" style="width:100%"/></td><td style="text-align: center; "></td><td style="text-align: center; "><input type="text" style="width:100%"/></td> <td style="text-align: center; "><button type="button" class="RoleOfdelete btn btn-primary btn-sm" style="margin-right:15px;" onclick=delrow(this)>删除</button></td> </tr>')
        }
        function deleteAddFormatter(value, row, index) {
            return [
                '<button type="button" class="RoleOfdelete btn btn-primary btn-sm" style="margin-right:15px;" onclick=delrow(this)>删除</button>',
            ].join('');
        }
        function delrow(obj) {
            $(obj).parent().parent().remove();
            /*
            document.getElementById("add_table").deleteRow(0);
            */
        }
    </script>
</body>

</html>